<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 包含头部信息用于适应不同设 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 包含 bootstrap 样式 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .row:after {
            content: "";
            clear: both;
            display: block;
        }
        [class*="col-"] {
            float: left;
            padding: 25px;
        }
        /* .col-1 {width: 8.33%;} */
        /* .col-2 {width: 16.66%;}
        .col-3 {width: 25%;} */
        /* .col-4 {width: 33.33%;} */
        /* .col-5 {width: 41.66%;} */
        .col-6 {width: 50%;}
        /* .col-7 {width: 58.33%;} */
        /* .col-8 {width: 66.66%;} */
        .col-9 {width: 125%;}
        /* .col-10 {width: 83.33%;}
        /* .col-11 {width: 91.66%;} */
        .col-12 {width: 100%;} 
        html {
            font-family: "Lucida Sans", sans-serif;
        }
        .header {
            /* background-color: #9933cc; */
            color: #ffffff;
            padding: 15px;
        }
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color :#33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .menu li:hover {
            background-color: pink;
        }
            </style>
</head>
<body>
    
<div class="header">
    <h1>Chania</h1>
    </div>
    
    <div class="row">
    
    <div class="col-5 menu">
    <ul>
    <li>one</li>
    <li>two</li>
    <li>therr</li>
    <li>four</li>
    </ul>
    </div>
    
    <div class="col-9">
    <!-- <h1>The City</h1> -->
    <!-- <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> -->
    <!-- <p>Resize the browser window to see how the content respond to the resizing.</p> -->
    </div>
    



    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
<!-- Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。 -->
<!-- 什么是 Viewport?
viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
-->